import { createStyles } from 'antd-style';

export const useStyle = createStyles(({ token, css, prefixCls }) => {
    return {
        layout: css`
      width: 100%;
      min-width: 1000px;
      height: 100dvh;
      display: flex;
      background: ${token.colorBgContainer};
      font-family: AlibabaPuHuiTi, ${token.fontFamily}, sans-serif;
    `,
        // chat list 样式
        chat: css`
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      padding-block: ${token.paddingLG}px;
      padding: ${token.paddingLG}px;
      gap: 16px;
    `,
        chatPrompt: css`
      .ant-prompts-label {
        color: #000000e0 !important;
      }
      .ant-prompts-desc {
        color: #000000a6 !important;
        width: 100%;
      }
      .ant-prompts-icon {
        color: #000000a6 !important;
      }
    `,
        chatList: css`
      flex: 1;
      overflow: auto;
    `,
        chatRender: css`
      flex: 1;
    `,
        loadingMessage: css`
      background-image: linear-gradient(90deg, #ff6b23 0%, #af3cb8 31%, #53b6ff 89%);
      background-size: 100% 2px;
      background-repeat: no-repeat;
      background-position: bottom;
    `,
        placeholder: css`
      padding-top: 32px;
    `,
        // sender 样式
        sender: css`
      width: 100%;
      max-width: 700px;
      margin: 0 auto;
    `,
        speechButton: css`
      font-size: 18px;
      color: ${token.colorText} !important;
    `,
        senderPrompt: css`
      width: 100%;
      max-width: 700px;
      margin: 0 auto;
      color: ${token.colorText};
    `,
    };
}); 